:root{
--stroke:rgb(119, 86, 40, 0.3);
--brand:#855F39; 
--brand2:#2D2D2D; 
--radius: 1.25rem;
--text: #2D2D2D;

--bg: transparent;          
--card-bg: #fff;
--muted: #7a6d5e;
--border: #e7e2da;
--star: #855F39;             /* muted bronze */
--radius: 14px;

--accent: #855F39;
--accent-ink: #ffffff;
--card: #ffffff;
--ink: #2b2b2b;
--line: #e8e2dc;
--past: rgba(133,95,57,0.05);
}


/* HERO carousel styles */
.hero-carousel { 
    height: 84vh; 
    min-height: 400px; 
    padding-bottom: 70px;
    position: relative;
}

.hero-carousel .carousel, 
.hero-carousel .carousel-inner, 
.hero-carousel .carousel-item { 
    height:100% 
}

.hero-photo { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04); 
    transition: transform 6s ease-out; 
}

.hero-carousel .overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(255, 255, 255, 0.05); */
  z-index: 1;
}

.carousel-item.active .hero-photo{ transform: scale(1.09); }

.hero-carousel .caption{ 
    position: absolute; 
    z-index: 2;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background: rgba(255, 255, 255, 0.5);
    width: min(100%, 900px); 
}

/* indicators subtle */
.carousel-indicators {
    margin-bottom: 80px;
    gap: 10px;
}

.carousel-indicators [data-bs-target] { 
    width:9px; 
    height:9px; 
    border-radius:50%; 
    background:#fff; 
    opacity:.8;
    padding: 5px;
    margin-bottom: 10px;
    border: none;
    outline: none;
}

.carousel-indicators .active { 
    background: #855F39; 
    opacity:1 
}

@media (max-width: 1200px) {
    .hero-carousel { 
        height: 76vh; 
        padding-bottom: 100px;
    }
}

@media (max-width: 992px) {
    .hero-carousel { 
        height: 70vh; 
        padding-bottom: 100px;
    }
}

@media (max-width: 768px) {
    .hero-carousel { 
        height: 64vh; 
        padding-bottom: 100px;
    }
}

@media (max-width: 400px) {
    .hero-carousel { 
        padding-bottom: 130px;
    }
}




/* ---------- ROOM CARD LOOK ---------- */
.frame {
    position:relative; 
    border-radius: calc(var(--radius) + .35rem); 
    overflow:hidden; 
    isolation:isolate;
    border:1px solid var(--stroke);
    box-shadow: 0 10px 10px rgb(119, 86, 40, 0.3);
    transform: translateZ(0);
}

.img-wrap img { 
    width:100%; 
    height: clamp(260px, 44vw, 420px); 
    object-fit: cover; 
    display:block; 
}




/* ---------- FILTER CALENDAR ---------- */

.booking-form{ 
    background:#fff; 
    border:1px solid var(--stroke); 
    margin-inline:auto; 
    transform: translateY(-30%); 
    position: absolute;
    z-index: 2;
    border-radius: 20px;
    margin-top: -100px;
}

.booking-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 15px;
    padding: 20px 30px;
}

.booking-form .form-control { 
    background:#fff; 
    color:var(--text); 
    border-color:var(--stroke); 
    border-radius:.8rem;
}

#room-type {
    appearance: none;          
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232D2D2D' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center; 
    background-size: 1rem;
    border-color: var(--stroke);
    border-radius: .8rem;
    color: var(--text);
}

.booking-form .form-control:focus, 
.booking-form .custom-select:focus{ 
    box-shadow:0 0 0 .15rem rgba(215,181,128,.3) 
}

.booking-form .action {
    display: flex;
    gap: 10px;
    color: var(--text);   
}

.booking-form .action button, 
.booking-form .action a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    padding: .5rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .8rem;
    font-family: 'Mulish';
    color: #855F39;
}

.booking-form .action button {
    background: rgb(119, 86, 40, 0.15); 
}

.booking-form .action button:focus, 
.booking-form .action a:focus {
    box-shadow:0 0 0 .15rem rgba(215,181,128,.3) 
}

@media (max-width: 1750px) {
    .form-control-lg {
        height: calc(1.5em + 1rem + 2px);
        padding: .3rem 0.9rem;
        font-size: 1.15rem;
        line-height: 1.5;
    }

    .booking-form .action button, 
    .booking-form .action a {
        font-size: 1.15rem;
    }

    #room-type {
        background-position: right 0.5rem center; 
    }
}

@media (max-width: 1600px) {
    .small, small {
        font-size: 105%;
    }

    .form-control-lg {
        height: calc(1.5em + 1rem + 2px);
        font-size: 1rem;
        line-height: 1.5;
    }

    .booking-form .action button, 
    .booking-form .action a {
        font-size: 1rem;
    }

    .booking-form {
        gap: 11px;
        padding: 20px 30px;
    }
}

@media (max-width: 1200px) {
    .booking-form .action {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .booking-form {
        margin-top: -150px;
    }
}

@media (max-width: 992px) {
    .small, small {
        font-size: 90%;
        line-height: 20px;
    }

    .booking-form {
        padding: 16px 26px;
    }
}

@media (max-width: 768px) {
    .small, small {
        line-height: 18px;
    }

    .form-control-lg {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .booking-form .action button, 
    .booking-form .action a {
        font-size: 0.9rem;
    }
}

@media (max-width: 500px) {
    .booking-form {
        padding: 12px 20px;
        gap: 6px;
    }

    .small, small {
        line-height: 18px;
    }

    .form-control-lg {
        font-size: 0.85rem;
        line-height: 1.3;
        border-radius: .6rem;
    }

    .booking-form .action button, .booking-form .action a {
        padding: .4rem 1rem;
        font-size: 0.85rem;
        line-height: 1.3;
        border-radius: .6rem;
    }
}

@media (max-width: 400px) {
    .booking-form .action button, .booking-form .action a {
        padding: .4rem 0.5rem;
        font-size: 0.85rem;
        line-height: 1.3;
        border-radius: .6rem;
    }

    .booking-form {
        margin-top: -200px;
    }
}



/* ---------- SECTIONS ROOM TYPE ---------- */
.room-section {
    scroll-snap-align:start; 
    padding-block: clamp(5rem, 6vw, 7rem); 
    border-bottom:1px dashed var(--stroke)
}

.price {
    margin: 10px 0px 20px 0px;
    color:#855F39; 
    width: fit-content;
}

.spec {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.spec-chip {
    border:1px solid var(--stroke); 
    background: rgb(133, 95, 57, 0.03);
    color: #855F39; 
    border-radius:999px; 
    padding: 0px 10px; 
    display:inline-flex; 
    align-items:center; 
    gap: 6px;
    font-size: 14px;
    max-height: 30px;
}

.spec-chip i {
    margin-right: 2px;
}

.spec-chip span {
    font-size: 17px;
    font-weight: 300;
}

.spec-chip span.bed {
    font-size: 21px;
}

.spec-chip img {
    height: 20px;
}

.sticky-note .description {
    margin-bottom: 30px;
}

.detail {
    display: flex;
    gap: 15px;
}

.detail a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    
    padding: .5rem 1.2rem;
    font-size: 1.15rem;
    line-height: 1.5;
    border-radius: .8rem;
    font-family: 'Mulish';
    color: #855F39;
}

.detail .phone {
    background: rgb(119, 86, 40, 0.15); 
}

.detail .phone:hover,
.detail .detail:hover {
    color: #855F39;
}

.detail .phone:focus,
.detail .detail:focus {
    box-shadow: none;
}

/* subtle motion on hover */
.lift:hover { 
    transform: translateY(-6px); 
    transition:.35s ease 
}


/* sticky side label for big screens */
@media (min-width: 992px) {
    .sticky-note{ position: sticky; top: 96px }
}

@media (max-width: 992px) {
    .room-section .row { gap: 35px;}
    .room-section {
        padding-block: clamp(4rem, 6vw, 4.5rem); 
    }

    .detail a {
        padding: .5rem 1.2rem;
        font-size: 1rem;
    }

    .sticky-note .description {
        margin-bottom: 20px;
    }

    .price {
        margin: 10px 0px 15px 0px;
    }
}

@media (max-width: 500px) {
    .detail a {
        padding: .4rem 1rem;
        font-size: 0.9rem;
    }
}



/* ---------- SECTIONS REVIEWS ---------- */

.header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.5rem;
}

.header-row .stars{
    color: #855F39;
}

.rvw-marquee{
    background: var(--bg);
    padding: 40px 0;
}

.rvw-slider {
    padding: 0px 15px;
}

.header-row{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:1rem; 
    margin-bottom:1.5rem;
}

.rating-pill i { color: var(--brand); }

.rvw-card{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  height: 100%;
}

.rvw-stars{ 
    font-size:22px; 
    line-height:1; 
    letter-spacing:1px; 
    margin-bottom:6px; 
    color: var(--star); 
}
/* .rvw-card p{ margin:0 0 6px; font-size:15px; line-height:1.45; color: var(--text); } */
.rvw-card small{ color: var(--muted); font-size:12.5px; }

/* tinh chỉnh mũi tên Splide cho gọn */
.rvw-slider .splide__arrow{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  width: 36px; height: 36px;
  opacity: .9;
}
.rvw-slider .splide__arrow:hover{ opacity: 1; }
.rvw-slider .splide__arrow svg{ width: 16px; height:16px; }

.rvw-card p {
    font-size: 80%;
    line-height: 1.35;
}

@media (max-width: 1600px) {
    .rvw-card p {
        font-size: 100%;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
    .rvw-card small {
        font-size: 10.5px;
    }

    .rvw-card p {
        margin: 0;
    }

    .rvw-stars {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .rvw-card {
        padding: 10px 16px;
    }

    .rvw-card p {
        font-size: 100%;
        line-height: 1.45;
    }
}

@media (max-width: 600px) {
    .rvw-card p {
        font-size: 100%;
        line-height: 1.5;
        margin-bottom: 5px;
    }
}



/* ---------- SECTIONS CALENDAR ---------- */
.calendar {
    padding-block: clamp(4rem, 6vw, 5rem);
    border-bottom: 1px dashed var(--stroke);
    display: none;
}

.heading{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:8px; 
    margin-bottom: 16px }

.controls{ 
    display:flex; 
    gap: 10px 
}

.calendar button{
    background: var(--accent); 
    color: var(--accent-ink);
    border:none; 
    border-radius: 8px; 
    padding:8px 12px; 
    font-weight:600; 
    cursor:pointer;
    transition: background 0.2s;
}

.calendar button:hover { background: #6e4c2f }

button:active,
button:focus { 
    outline: none;
}

.calendar button:disabled{ opacity: .6; cursor: not-allowed }

.cal { 
    display:grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap:16px 
}

@media (max-width: 992px){ .cal{ grid-template-columns: 1fr } }

.card{ 
    background: var(--card); 
    border: 1px solid var(--line); 
    border-radius: var(--radius); 
    padding: 12px 12px 14px; 
    box-shadow: 0 1px 0 rgba(0,0,0,.02); 
    justify-content: space-between;
}

.mhead{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px }
.meta{ color: var(--muted); font-size: 12px }

.grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px }
.wk{ text-align:center; font-size:12px; color:var(--muted); padding: 6px 0; border-bottom:1px solid var(--line) }

.d { 
    position: relative; 
    height: 42px; 
    display:grid; 
    place-items:center; 
    border:1px solid var(--line); 
    border-radius: 8px; 
    background:#fff; 
    font-weight:600; 
    font-size: 14px; 
}

.disabled{ background: var(--past); color:#9c8f81 }
.today{ outline: 2px dashed var(--accent); outline-offset: 2px }
.booked { 
    background: var(--accent); 
    color: var(--accent-ink); 
    border: 2px solid var(--accent) 
}

.legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px }
.chip{ 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    padding: 2px 14px; 
    border:1px solid var(--line); 
    border-radius:999px; font-size:12px; 
    background:#fff 
}

.sw{ 
    width:14px; 
    height:14px; 
    border-radius:3px; 
    background: var(--accent) 
}

.sw.av{ background:#fff; border:1px solid var(--line) }
.sw.past{ background: var(--past); border:1px solid var(--line) }
.sw.today{ 
    background: var(--past); 
    outline: 1px dashed var(--accent); 
    outline-offset: 1px 
}
.sw.select-check {
    outline: 1.5px solid #855F39; 
    background: #fff;
}
.sw.select-night {
    background: rgba(133,95,57,0.15); 
}

.note{ color: var(--muted); font-size: 12px; margin-top: 10px }


/* Tô khoảng chọn */
.d.sel-start, .d.sel-end { 
    outline: 2px solid #855F39; 
    position: relative; 
}
.d.sel-mid { 
    background: rgba(133,95,57,0.15); 
}

.d.booked.sel-mid {
  background: repeating-linear-gradient(
    45deg,
    #855F39 0, #855F39 4px,
    #855f39e1 4px, #855f39e1 8px
  );
}

.d.turnover-in::after{
    content: "14:00 in";
  position:absolute; 
  bottom: -9.4px; font-size: 10px; opacity:.7;
}
.d.turnover-out::after{
    content: "12:00 out";
  position:absolute; 
  bottom: -9.4px; font-size: 10px; opacity:.7;
}

.d.turnover-in.turnover-out::after {
    content: "";
}










/* ---------- SLIDER ROOM TYPE IMG ---------- */
.hx-slider{
    position:relative;
    overflow:hidden;
}

.hx-slides{
    position:relative;
    height:420px
}

.hx-slides img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.04);
    transition:opacity .6s ease,transform .6s ease
}

.hx-slides img.is-active{
    opacity:1;
    transform:scale(1)
}

.hx-prev,.hx-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    width:32px;
    height:32px;
    border-radius:999px;
    border:0;
    color: var(--brand);
    background: rgba(255, 255, 255, 0.7);
    font-size:22px;
    font-weight: 900;
    line-height:1;
    cursor:pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hx-prev:hover,.hx-next:hover{
    background: rgb